<template>
  <div class="login" :style="{height:loginHeight,width:loginWidth}">
    <hlvy-loading :fullscreenLoading="loadingShow" :text="'登录中······'"></hlvy-loading>
    <div class="logdiv center">
      <marquee
        style="position: absolute;left: 0%;top: 2%;color: #409EFF;font-size: 19px"
      >{{msgValue}}</marquee>
      <hlvy-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        :rules="rules"
        label-width="100px"
        class="demo-dynamic form"
      >
        <hlvy-form-item
          prop="loginName"
          label="用户名: "
         >
          <hlvy-input style="width: 70%" v-model="dynamicValidateForm.loginName"></hlvy-input>
        </hlvy-form-item>
        <br />
        <hlvy-form-item
          :label="'密码: '"
          prop="loginPwd"
         >
          <hlvy-input style="width: 70%" type="password" v-model="dynamicValidateForm.loginPwd"></hlvy-input>
        </hlvy-form-item>
        <br />
        <hlvy-form-item
          :label="'验证码: '"
          prop="loginyzm"
        >
          <hlvy-input style="width: 70%;" type="text" v-model="dynamicValidateForm.loginyzm"></hlvy-input>&emsp;
          <span @click="randyzm()" class="verCode">{{yzmn}}</span>
        </hlvy-form-item>
        <hlvy-form-item>
          <p class="loginp">
            <hlvy-checkbox
              @change="check"
              v-model="dynamicValidateForm.checked"
              class="loginckd"
            >记住密码</hlvy-checkbox>
          </p>
          <hlvy-button class="loginbtn btnLogin" @click="submitForm('dynamicValidateForm')">登录</hlvy-button>
        </hlvy-form-item>
      </hlvy-form>
    </div>
  </div>
</template>

<script>
import storage from "@/storage/storage.js"
import {stripscript} from "@/utils/validate.js"
import {reactive} from "@vue/composition-api"

export default {
  name: "login",
  // setup(props,context){
  //   //这里放置data数据，生命周期，自定义函数
  //   const menuTad=reactive([
  //     {txt:"nihao",age:26},
  //     {txt:"liahiqin",age:20}
  //   ])
  //   console.log(menuTad)
  // },
  data() {
    //验证用户名
    var validateUsername=(rule,value,callback)=>{
      var value=stripscript(value);//过滤掉特殊字符
      this.dynamicValidateForm.loginName=value;
      if(value==""){
        callback(new Error("请输入用户名"));
      }
    };
    //验证密码
    var validatePassword=(rule,value,callback)=>{
      var value=stripscript(value);
      let reg=/^\d{6}$/;
      if(value==""){
        callback(new Error("请输入密码"))
      }else if(!reg.test(value)){
        callback(new Error("密码格式错误"))
      }else{
        callback()
      }
    };
    //验证验证码
    var validateCode=(rule,value,callback)=>{
      let reg=this.yzm.toUpperCase()//value.toUpperCase();
      if(value==""){
        callback(new Error("请输入验证码"))
      }else if(reg!=value.toUpperCase()){
        callback(new Error("验证码错误"))
      }else{
        callback()
      }
    };
    return {
      loginHeight: "100%",
      loginWidth: "100%",
      dynamicValidateForm: {
        loginName: "hlvy",
        loginPwd: "hlvy",
        loginyzm: "",
        checked: true,
        menuTad:[
          {txt:"nihao",age:26},
          {txt:"liahiqin",age:20}
        ]
      },
      rules:{
        loginName: [
            { validator: validateUsername, trigger: 'blur' }
          ],
          loginPwd: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          loginyzm: [
            { validator: validateCode, trigger: 'blur' }
          ]
      },
      yzmn: "",
      yzm: "",
      loadingShow: false,
      msgValue: "用户名密码随便输入哦······"
    };
  },
  components: {
    storage
  },
  created() {
    this.wdht();

    //登录添加键盘事件,注意,不能直接在焦点事件上添加回车
    let that = this;
    document.onkeydown = function(e) {
      let key = window.event.keyCode;
      if (key === 13) {
        that.submitForm("dynamicValidateForm");
      }
    };

    this.randyzm();
  },
  mounted() {
    /**
     * 记住密码从tolist拿去 判断
     * */
    let _this = this;
    let ches = storage.get("dynamicValidateForm");
    if (ches != null && ches.checked) {
      _this.dynamicValidateForm.loginName = ches.loginName;
      _this.dynamicValidateForm.loginPwd = ches.loginPwd;
      _this.dynamicValidateForm.checked = ches.checked;
    } else {
      _this.dynamicValidateForm.loginName = "";
      _this.dynamicValidateForm.loginPwd = "";
      _this.dynamicValidateForm.checked = false;
    }

    /*    /!**
                 * 跑马灯效果
                 * *!/
                setInterval(function () {  //定时任务
                    var first=_this.msgValue.substring(0,1);
                    var end=_this.msgValue.substring(1);
                    _this.msgValue=end+first;
                },200);*/
  },
  methods: {
    randyzm() {
      //生成随机验证码

      let code = "";
      let coden = "";
      var codeLength = 4; //验证码的长度

      var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H',
      'I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b',
      'c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v',
      'w','x','y','z');//随机数
      for (var i = 0; i < codeLength; i++) {
        //循环操作
        var index = Math.floor(Math.random() * 62); //取得随机数的索引（0~61）
        code += random[index]; //根据索引取得随机数加到code上
        coden += random[index] + " "; //根据索引取得随机数加到code上
      }
      this.yzm = code; //把code值赋给验证码
      this.yzmn = coden; //把code值赋给验证码
    },
    wdht() {
      /**
       * 拿到浏览器的高宽
       * @type {string}
       */
      this.loginHeight = window.innerHeight + "px";
      this.loginWidth = window.innerWidth + "px";
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (
            this.dynamicValidateForm.loginyzm.toUpperCase() !=
            this.yzm.toUpperCase()
          ) {
            this.randyzm();
            return;
          } else {
            this.loadingShow = !this.loadingShow;
            sessionStorage.setItem(
              "loginMsg",
              JSON.stringify(this.dynamicValidateForm)
            );
            if (this.dynamicValidateForm.checked) {
              storage.set("dynamicValidateForm", this.dynamicValidateForm);
            } else {
              storage.remove("dynamicValidateForm");
            }
            this.$router.push({ path: "/" });
          }
        } else {
          this.loadingShow = false;
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * checkbox
     */
    check() {}
  }
};
</script>

<style scoped>
.login {
  position: relative;
  background: url("../../assets/images/login/login.png") no-repeat;
  background-size: cover;
}

.logdiv {
  width: 44%;
  height: 50%;
  filter: alpha(opacity=70); /*支持 IE 浏览器*/
  -moz-opacity: 0.7; /*支持 FireFox 浏览器*/
  opacity: 0.7; /*支持 Chrome, Opera, Safari 等浏览器*/
  border-radius: 10px;
  box-shadow: 0 0 1px #5e91ff inset;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -16%;
  margin-left: -22%;
}
.form {
  margin-top: 10%;
  margin-left: 10%;
}
.el-form-item {
  margin-bottom: 0;
}
.loginbtn {
  width: 60%;
  margin-left: 4%;
  margin-top: 1%;
}
.loginckd {
  width: 60%;
  margin-left: 46%;
}

.verCode {
  display: inline-block;
  text-align: center;
  width: 90px;
  font-size: 20px;
  height: 32px;
  color: #2b3b4b;
  background-color: #1ea7fe;
}
</style>

/**
* 修改登录按钮样式
*/

<style>
.logdiv .el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #409eff;
  border: 1px solid #409eff;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.loginp .el-checkbox__inner {
  display: inline-block;
  position: relative;
  border: 1px solid #409eff;
  border-radius: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background-color: #fff;

  z-index: 1;
  -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
</style>
